<template>
  <view class="feedback-container">
    <view class="header-section">
      <text class="page-title">意见反馈</text>
    </view>
    
    <view class="feedback-form">
      <view class="form-item">
        <textarea 
          class="feedback-textarea" 
          v-model="feedbackContent" 
          placeholder="请输入您的意见和建议，我们将不断改进服务..."
        />
      </view>
      
      <view class="form-item">
        <input 
          class="form-input" 
          v-model="contactInfo" 
          placeholder="联系方式（邮箱/手机号，可选）" 
        />
      </view>
      
      <view class="form-item">
        <button class="submit-button" @click="submitFeedback">提交反馈</button>
      </view>
    </view>
    
    <view class="feedback-tips">
      <text class="tip-title">反馈须知</text>
      <view class="tip-item">
        <text>• 请详细描述您遇到的问题或建议</text>
      </view>
      <view class="tip-item">
        <text>• 留下联系方式有助于我们及时回复您</text>
      </view>
      <view class="tip-item">
        <text>• 我们会在1-3个工作日内处理您的反馈</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { feedbackApi } from '../../src/services/api'

// 反馈内容
const feedbackContent = ref('')
// 联系方式
const contactInfo = ref('')

// 提交反馈
const submitFeedback = async () => {
  if (!feedbackContent.value.trim()) {
    uni.showToast({
      title: '请输入反馈内容',
      icon: 'none'
    })
    return
  }
  
  try {
    uni.showLoading({
      title: '提交中...'
    })
    
    // 调用提交反馈的API
    const response: any = await feedbackApi.submitFeedback({
      content: feedbackContent.value,
      contact: contactInfo.value || undefined
    })
    
    uni.hideLoading()
    uni.showToast({
      title: '反馈提交成功',
      icon: 'success'
    })
    
    // 清空表单
    feedbackContent.value = ''
    contactInfo.value = ''
  } catch (error: any) {
    uni.hideLoading()
    uni.showToast({
      title: error.message || '提交失败',
      icon: 'none'
    })
  }
}
</script>

<style lang="scss" scoped>
.feedback-container {
  min-height: 100vh;
  background-color: #FFFFFF;
  padding: 20rpx;
}

.header-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  
  .page-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    text-align: center;
  }
}

.feedback-form {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.form-item {
  margin-bottom: 30rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.feedback-textarea {
  width: 100%;
  height: 200rpx;
  padding: 20rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 10rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.form-input {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 10rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.submit-button {
  width: 100%;
  background-color: #4B0082;
  color: #fff;
  border: none;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 32rpx;
  font-weight: bold;
  
  &:active {
    opacity: 0.8;
  }
}

.feedback-tips {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.tip-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.tip-item {
  margin-bottom: 15rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  text {
    font-size: 28rpx;
    color: #666;
  }
}
</style>